<!DOCTYPE html>
<html style="100%">
<head>
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1"/>-->
    <meta charset="utf-8">
    <title>ECharts</title>

    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <!-- 引入 自定义主题customed -->
<!--    <script src="walden.js"></script>-->
</head>
<body style="height:100%">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:900px;margin:0 auto;"></div>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
         myChart.showLoading({
                text : "加载中..."
            });
        // 指定图表的配置项和数据
        var option = {
         //backgroundColor:'rgba(128, 128, 128, 0)', //rgba设置透明度0.1
<!--    title: {-->
<!--        text: '24小时空气数据变化',-->
<!--        left:'center',//标题居中,-->
<!--        textStyle:{-->
<!--         fontSize:40,-->
<!--          color:'#333333'-->
<!--        },-->
<!--    },-->
     grid: {
        left: '3%',
        top:"2%",
        right: '3%',
        bottom: '20%',
        show: true,
        borderWidth:1,
        containLabel: true
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        icon:'rect',
        itemGap:30,//间距
        data: ['A相电压', 'B相电压', 'C相电压', 'A相电流', 'B相电流', 'C相电流', '正向有功电能','A相有功功率','B相有功功率','C相有功功率','总功率因数'],
         textStyle:{//图例文字的样式
            color:'#333333',
            fontSize:30
        },
        y:'bottom'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
         axisLine:{
            lineStyle:{
                width:'5',//宽度
                color:'#333333'//颜色
            }
        },
        axisLabel: {
        show: true,
         interval:5,//间隔显示
        textStyle: {
          color: '#333333',  //更改坐标轴文字颜色
          fontSize : 30      //更改坐标轴文字大小
        }
     },
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value',
         axisLine:{
            lineStyle:{
                width:'5',
                color:'#333333'
            }
        },
        axisLabel: {
            formatter: '{value}',
             textStyle: {
          color: '#333333',  //更改坐标轴文字颜色
          fontSize : 30      //更改坐标轴文字大小
        }
       }
    },
     color:['#ff0000','#ff00ff','#ffff00','#00ff00','#0000ff','#00ffff','#997E00','#F18E00','#000000','#CCf101','#1F7801'],
    series: [
        {
            name: 'A相电压',
            type: 'line',
              lineStyle:{
               normal:{
                   width:10,//宽度
               }
            },
            data: [11, 11, 15, 13, 12, 13, 10]
        },
        {
            name: 'B相电压',
            type: 'line',
             lineStyle:{
               normal:{
                   width:10,
               }
            },
            data: [12, -2, 12, 15, 3, 2, 0]
        },
        {
            name: 'C相电压',
            type: 'line',
             lineStyle:{
               normal:{
                   width:10,
               }
            },
            data: [13, -2, 21, 51, 3, 2, 0]
        },
        {
            name: 'A相电流',
            type: 'line',
             lineStyle:{
               normal:{
                   width:10,
               }
            },
            data: [14, -2, 12, 15, 3, 2, 0]
        },{
            name: 'B相电流',
            type: 'line',
             lineStyle:{
               normal:{
                   width:10,
               }
            },
            data: [15, -2, 21, 25, 3, 2, 0]
        },{
            name: 'C相电流',
            type: 'line',
             lineStyle:{
               normal:{
                   width:10,
               }
            },
            data: [16, -2, 12, 35, 3, 2, 0]
        },
        {
            name: '正向有功电能',
            type: 'line',
             lineStyle:{
               normal:{
                   width:10,
               }
            },
            data: [17, -2, 21, 45, 3, 2, 0]
        },
        {
            name: 'A相有功功率',
            type: 'line',
             lineStyle:{
               normal:{
                   width:10,
               }
            },
            data: [17, -2, 21, 45, 3, 2, 0]
        },
        {
            name: 'B相有功功率',
            type: 'line',
             lineStyle:{
               normal:{
                   width:10,
               }
            },
            data: [17, -2, 21, 45, 3, 2, 0]
        },
        {
            name: 'C相有功功率',
            type: 'line',
             lineStyle:{
               normal:{
                   width:10,
               }
            },
            data: [17, -2, 21, 45, 3, 2, 0]
        },
        {
            name: '总功率因数',
            type: 'line',
             lineStyle:{
               normal:{
                   width:10,
               }
            },
            data: [17, -2, 21, 45, 3, 2, 0]
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
      //myChart.setOption(option);
     // myChart.hideLoading();

        function initData(value){
            option.series[0].data=JSON.parse(value).ai;
            option.series[1].data=JSON.parse(value).bi;
            option.series[2].data=JSON.parse(value).ci;
            option.series[3].data=JSON.parse(value).au;
            option.series[4].data=JSON.parse(value).bu;
            option.series[5].data=JSON.parse(value).cu;
            option.series[6].data=JSON.parse(value).timezhengxiang;
            option.series[6].data=JSON.parse(value).aw;
            option.series[6].data=JSON.parse(value).bw;
            option.series[6].data=JSON.parse(value).cw;
            option.series[6].data=JSON.parse(value).total;
            option.xAxis.data=JSON.parse(value).time;
            myChart.setOption(option,true);
            myChart.hideLoading();
             //获取数据之后重新绘制布局
            myChart.resize();
        }
</script>
</body>
</html>